<html>  
  <head>  
        <meta charset="utf-8">  
        <title>10.2 饼状图</title>  
  </head> 

<style>


</style>
    <body>  
		<script src="../../d3/d3.min.js" charset="utf-8"></script>  
        <script>
		
		var width  = 400;	//SVG绘制区域的宽度
		var height = 400;	//SVG绘制区域的高度
			
		var svg = d3.select("body")			//选择<body>
					.append("svg")			//在<body>中添加<svg>
					.attr("width", width)	//设定<svg>的宽度属性
					.attr("height", height);//设定<svg>的高度属性
		
		//1.确定初始数据
		var dataset = [ ["小米",60.8] , ["三星",58.4] , ["联想",47.3] , ["苹果",46.6] ,
						["华为",41.3] , ["酷派",40.1] , ["其他",111.5] ];
		
		//2.转换数据
		var pie = d3.layout.pie()
						//.startAngle(Math.PI * 0.2)
						//.endAngle(Math.PI * 1.5)
						.value(function(d){ return d[1]; });
						
		var piedata = pie(dataset);

		console.log(piedata);
		
		//3.绘制
		
		//外半径和内半径
		var outerRadius = width / 3;
		var innerRadius = 0;
		
		//创建弧生成器
		var arc = d3.svg.arc()
						.innerRadius(innerRadius)
						.outerRadius(outerRadius);
		
		var color = d3.scale.category20();
		
		//添加对应数目的弧组，即<g>元素
		var arcs = svg.selectAll("g")
					  .data(piedata)		//绑定转换后的数据piedata
					  .enter()
					  .append("g")
					  .attr("transform","translate("+( width/2 )+","+ ( height/2 ) +")");
				
		//添加弧的路径元素
		arcs.append("path")
			.attr("fill",function(d,i){
				return color(i);	//设定弧的颜色
			})
			.attr("d",function(d){
				return arc(d);	//使用弧生成器
			});
		
		
		//添加弧内的文字元素
		arcs.append("text")
			.attr("transform",function(d){
				var x = arc.centroid(d)[0] * 1.4;		//文字的x坐标
				var y = arc.centroid(d)[1] * 1.4;		//文字的y坐标
				return "translate(" + x + "," + y + ")";
			})
			.attr("text-anchor","middle")
			.text(function(d){
				//计算市场份额的百分比
				var percent = Number(d.value)/d3.sum(dataset,function(d){ return d[1]; }) * 100;
				
				//保留1位小数点，末尾加一个百分号返回
				return percent.toFixed(1) + "%";
			});
			
		
		//添加连接弧外文字的直线元素
		arcs.append("line")
			.attr("stroke","black")
			.attr("x1",function(d){ return arc.centroid(d)[0] * 2; })
			.attr("y1",function(d){ return arc.centroid(d)[1] * 2; })
			.attr("x2",function(d){ return arc.centroid(d)[0] * 2.2; })
			.attr("y2",function(d){ return arc.centroid(d)[1] * 2.2; });
			
		//添加弧外的文字元素
		arcs.append("text")
			.attr("transform",function(d){
				var x = arc.centroid(d)[0] * 2.5;
				var y = arc.centroid(d)[1] * 2.5;
				return "translate(" + x + "," + y + ")";
			})
			.attr("text-anchor","middle")
			.text(function(d){
				return d.data[0];
			});
		  
        </script>  
		
    </body>  
</html>  